<template>
    <div>
        <div :class="{'Book':state===1,'Books':state===0}" v-if="state===1">
            <div class="content">
                <div class="header" v-if="items&&items!=={}&&is_vip===1">
                    <div class="img">
                        <!--<img src="../../../../assets/img/BookShelf/chang1.png" alt="">-->
                        <img :src="items.book_cover" @click="detail(items.book_id,items.platform_book_id)"
                             :style="{'box-shadow':items.book_id===-1?'none':'0px 8px 16px rgba(0, 0, 0, 0.2)'}" alt="">
                    </div>
                    <div class="text" style="width: 60%;">
                        <div class="title" style="margin-left: .3rem;">{{items.book_name}}</div>
                        <div class="doc doc1">阅读至第{{items.chapter_no}}章</div>
                        <div class="doc doc2">
                            共{{items.word_number|capitalize}}万字，已读{{items.read_word_number|capitalize}}万字
                        </div>
                        <div class="btn">
                            <div class="">
                                <btn :obj="btnstyle" :text="btntext"
                                     v-on:statr="goPlaying(items.book_id,items.platform_book_id)"></btn>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header" v-else>
                    <div class="img">
                        <img src="../../../../assets/img/Book/pic.png" alt="">
                    </div>
                    <div class="text">
                        <div class="title">「十分读书」会员计划</div>
                        <div class="doc doc1">热门书籍，精细解读<br>
                          让你轻松读懂书中百味
                        </div>
                        <!--<div class="doc doc2">共{{items.word_number|capitalize}}万字，已读{{items.read_word_number|capitalize}}万字</div>-->
                        <div class="btn">
                            <div class="">
                                <btn :obj="btnstyles" :text="btntexts" v-on:statr="go('BuyVip')"></btn>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="booksbodyer">
                    <div class="head" v-if="false">
                        <div class="left">
                            <i class="iconfont icon-wodeshujia"></i>
                            <span>我的书架</span>
                        </div>
                        <div class="right" @click="go('AllBooks')">
                            <span>全部</span>
                            <i class="iconfont icon-jinru"></i>
                        </div>
                    </div>
                    <div class="body" v-for="(item,i) in Books" :key="i" v-show="is_vip===1&&item.length>1">
                        <div class="books">
                            <div v-for="(a,j) in item" :key="a.book_id">
                                <!--<img src="../../../../assets/img/BookShelf/chang1.png" alt="">-->
                                <img :src="a.book_cover" alt="" :style="{'box-shadow':a.box}"
                                     @click="detail(a.book_id,a.platform_book_id)">
                            </div>
                        </div>
                        <div class="bgssd">
                        </div>
                        <div class="bottomts"></div>
                    </div>
                </div>
                <!--<div class="bottoms" @click="go('AllBooks')" v-if="books.length>0">-->
                <!--我的书架<img src="../../../../assets/img/AllBooks/icon.png" alt="">-->
                <!--</div>-->
            </div>
        </div>
        <div class="bg-img" v-if="state===0">
            <img src="../../../../assets/img/Home/Book/2@3x.png" alt="">
        </div>
    </div>
</template>

<script>
    import btn from '../../../../components/btn/index'

    export default {
        name: 'index',
        data: function () {
            return {
                btnstyle: {
                    backgroundColor: '#ffd000',
                    color: '#66440a',
                    width: '100%',
                    height: '4rem',
                    opacity: 1,
                    borderRadius: '5rem',
                    boxShadow: '0 8px 24px 0 rgba(255, 208, 0, 0.4)'
                },
                btnstyles: {
                    backgroundColor: '#ffd000',
                    color: '#66440a',
                    width: '16rem',
                    height: '4rem',
                    borderRadius: '5rem',
                    opacity: 1,
                    boxShadow: '0 8px 24px 0 rgba(255, 208, 0, 0.4)'
                },
                btntexts: '立即加入',
                btntext: '立即添加书籍',
                books: [],
                is_vip: 0,
                state: 0,
                items: {
                    book_cover: require('../../../../assets/img/BookShelf/chang1.png'),
                    book_name: "您还未阅读书籍",
                    book_id: -1,
                    chapter_no: 0,
                    word_number: 0,
                    read_word_number: 0,
                }
            }
        },
        mounted: function () {
            this.update()
        },
        computed: {
            Books: {
                get: function () {
                    var book = this.tojson(this.books)
                    return book
                },
                set: function (obj) {
                    // this.data = obj
                }
            }
        },
        methods: {
            go: function (str) {
                return this.$router.push({
                    name: str
                })
            },
            goChapters: function (id, ids) {
                this.$router.push({
                    name: 'Chapter',
                    query: {
                        book_id: id,
                        platform_book_id: ids
                    }
                })
            },
            tojson: function (arr) {
                var arrs = []
                var obj = [{
                    book_cover: require('../../../../assets/img/BookShelf/chang1.png'),
                    is: -1,
                    user_books_read_record_id: -1,
                    book_id: -1,
                    box: 'none',
                    index: -1,
                    id: -1
                }]
                arr.forEach((item, i) => {
                    item.is = 0
                    item.index = i
                    item.box = '0px 8px 16px rgba(0, 0, 0, 0.2)'
                })
                arrs = arrs.concat(arr)
                arrs = arrs.concat(obj)
                var num = 3;
                var Arr = new Array(Math.ceil(arrs.length / num));
                for (var i = 0; i < Arr.length; i++) {
                    Arr[i] = new Array();
                    for (var j = 0; j < num; j++) {
                        Arr[i][j] = '';
                    }
                }
                for (var i = 0; i < arrs.length; i++) {
                    Arr[parseInt(i / num)][i % num] = arrs[i];
                }
                return Arr
            },
            update: function () {
                this.$axios.books_shelf_list({page_index: 1}).then(res => {
                    if (res.data.qing_code !== 100) {
                        this.state = 0
                        return
                    }
                    var isa = sessionStorage.getItem('isa')
                    if (res.data.qing_data.is_vip === 0 && !isa) {
                        this.$emit('slesd', 'Books')
                        sessionStorage.setItem('isa', true)
                    }
                    this.is_vip = res.data.qing_data.is_vip
                    var ishomes = localStorage.getItem('tenishomes')
                    if (this.is_vip === 1 && !ishomes && ishomes !== 1) {
                        console.log(res.data.qing_data.book_shelf.length)
                        this.$emit('popupreads', res.data.qing_data.book_shelf.length)
                    }
                    this.state = 1
                    this.books = res.data.qing_data.book_shelf
                    if (res.data.qing_data.last_book) {
                        this.items = res.data.qing_data.last_book
                        sessionStorage.setItem('ten_platform_book_id', res.data.qing_data.last_book.platform_book_id)
                        if (res.data.qing_data.is_vip === 1) {
                            this.btntext = '开始今日阅读'
                        } else {
                            this.btntext = '立即加入'
                        }
                    }
                })
            },
            goPlaying: function (i, id) {
                if (i === -1) {
                    this.go('Collection')
                } else {
                    sessionStorage.setItem('ten_platform_book_id', id)
                    this.$router.push({
                        name: 'Playing',
                        query: {book_id: i}
                    })
                }
            },
            detail: function (id, platform_book_id) {
                if (id === -1) {
                    this.go('AllBooks')
                } else {
                    // this.$router.push({
                    //   name: 'Playing',
                    //   query: {book_id: id}
                    // })
                    this.$router.push({
                        name: 'Chapter',
                        query: {
                            book_id: id,
                            platform_book_id: platform_book_id
                        }
                    })
                }
            }
        },
        components: {btn}
    }
</script>

<style scoped>
    @import "../../../../assets/css/components/Home/Book/index.css";
</style>
